<template>
	<div class="card-frame">
		<slot name="frame-title">
			<header
				class="card-frame-title"
				v-if="!isList && props.title && !isSearch"
			>
				{{ title }}
			</header>
			<header
				class="card-frame-title-list"
				v-if="isList && !props.title && !isSearch"
			>
				<div
					class="start-mask"
					:style="{ opacity: showStartMask ? '1' : '0' }"
				></div>
				<ul id="listContainer">
					<li
						class="anchor-point"
						:class="{ check: activeIndex === index }"
						@click="rollTo($event, index)"
						v-for="(item,index) in (appList as any)"
					>
						{{ item.group_name }}
					</li>
				</ul>
				<div
					class="end-mask"
					:style="{ opacity: showEndMask ? '1' : '0' }"
				></div>
				<img src="./images/filter.svg" @click="changPopupShow(true)" />
				<van-popup
					v-model:show="popupShow"
					:closed="changeCardIndex(null)"
					position="right"
					:style="{ width: '87.2vw', height: '100vh' }"
					teleport="body"
				>
					<template #default>
						<PopupContent
							@closePopup="changPopupShow"
							@triggerClick="triggerClick"
							@changeCardIndex="changeCardIndex"
							:appList="appList"
							:activeIndex="activeIndex"
							:cardIndex="cardIndex"
						/>
					</template>
				</van-popup>
			</header>
		</slot>
		<slot name="frame-content">
			<main class="card-frame-content" v-if="!isList">
				<Card
					v-for="item in (recentList as any)"
					:cardDetail="item"
					:searchKeyWord="searchKeyWord"
					@init="init"
				/>
			</main>
			<section id="contentList" class="card-frame-content-list" v-else>
				<div
					class="content-part"
					:class="{
						'search-part': isSearch,
						'loading-container': isLoadingIndex === index,
					}"
					v-for="(detail, index) in (appList as any)"
					:key="detail.group_id"
					:id="'part' + index"
				>
					<p class="title">
						{{ detail.group_name }}
					</p>
					<div class="card-list">
						<Card
							:class="{ 'show-load-all': detail.total !== detail.list?.length }"
							v-for="(item, itemIndex) in (detail as any).list"
							:key="item.fb_key"
							:cardDetail="item"
							:searchKeyWord="searchKeyWord"
							@init="init"
						/>
						<div
							class="loadAll"
							v-if="detail.total !== detail.list?.length"
							@click="emits('loadAll', detail.group_id, index)"
						>
							<div class="img-container">
								<img class="loading-img" src="./images/load.svg" />
							</div>
							<p>{{ $t('common.LoadAll', '加载全部') }}</p>
						</div>
					</div>
				</div>
			</section>
		</slot>
	</div>
</template>
<script setup lang="ts">
import Card from './components/Card.vue'
import PopupContent from './components/PopupContent.vue'
import useCardFrame from './hooks/useCardFrame'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps({
	title: {
		type: String,
		default: '',
	},
	appList: {
		type: Array,
		default: [],
	},
	recentList: {
		type: Array,
		default: [],
	},
	isSearch: {
		type: Boolean,
		default: false,
	},
	isLoadingIndex: {
		type: Number,
		default: -1,
	},
	searchKeyWord: {
		type: String,
		default: '',
	},
})
const emits = defineEmits(['scrollToPart', 'loadAll', 'init'])
const {
	showStartMask,
	showEndMask,
	rollTo,
	isList,
	activeIndex,
	popupShow,
	changPopupShow,
	triggerClick,
	init,
	cardIndex,
	changeCardIndex,
} = useCardFrame(props, emits)
</script>
<style lang="less" scoped>
.card-frame {
	background-color: #fff;
	margin-bottom: 8px;
	border-radius: 8px;
	.card-frame-title {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 14px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: inherit;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 15px;
		color: #1f2329;
		border-bottom: 1px solid #e8eaed;
		z-index: 9;
	}
	.card-frame-title-list {
		display: flex;
		position: sticky;
		top: 0;
		height: 44px;
		background-color: inherit;
		border-bottom: 1px solid #e8eaed;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		padding: 0 8px;
		z-index: 9;
		.start-mask {
			pointer-events: none;
			position: absolute;
			z-index: 9;
			left: 8px;
			top: 0;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transform: rotate(-180deg);
			transition: opacity 0.3s ease;
			opacity: 0;
		}
		.end-mask {
			pointer-events: none;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			z-index: 9;
			right: 38px;
			top: 0;
			width: 44px;
			height: 43px;
			background: linear-gradient(
				90deg,
				rgba(255, 255, 255, 0) 0%,
				#ffffff 87.5%
			);
			transition: opacity 0.3s ease;
			opacity: 1;
		}
		ul {
			width: 100%;
			height: 100%;
			overflow-x: scroll;
			overflow-y: hidden;
			margin-bottom: -3px;
			white-space: nowrap;
			// scroll-behavior: smooth;
			&::-webkit-scrollbar {
				display: none;
			}
			li {
				position: relative;
				user-select: none;
				height: 100%;
				max-width: 210px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: inline-block;
				line-height: 44px;
				margin: 0 5px;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 15px;
				color: #1f2329;
			}
			.check {
				color: @rok-mobile-primary-color;
				font-weight: 600;
				&::after {
					content: '';
					position: absolute;
					bottom: 0px;
					display: block;
					width: 24px;
					height: 4px;
					background: @rok-mobile-primary-color;
					border-radius: 20px;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
		.popup-content {
			padding: 20px 16px 40px;
			height: 100%;
			.popup-title {
				margin-bottom: 24px;
				span {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 600;
					font-size: 14px;
					line-height: 20px;
					color: #1f2329;
				}
				img {
					width: 16px;
					height: 16px;
				}
			}
		}
	}
	&-content {
		display: grid;
		grid-template-columns: repeat(4, 80px);
		grid-gap: 8px;
		padding: 16px 8px;
		justify-content: space-evenly;
	}
	&-content-list {
		padding: 16px 8px;
		.content-part {
			.title {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 600;
				font-size: 14px;
				color: #1f2329;
				margin-bottom: 16px;
				margin-top: 10px;
				margin-left: 5px;
			}
			.card-list {
				display: grid;
				grid-template-columns: repeat(4, 80px);
				grid-gap: 8px;
				justify-content: space-evenly;
				.show-load-all:nth-child(8) {
					display: none;
				}
				.loadAll {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 80px;
					.img-container {
						height: 50px;
						width: 50px;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-bottom: 8px;
						img {
							width: 30px;
							height: 30px;
						}
					}
					p {
						width: 100%;
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 11px;
						line-height: 16px;
						text-align: center;
						color: #8f959e;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden; //溢出内容隐藏
						text-overflow: ellipsis; //文本溢出部分用省略号表示
						display: -webkit-box; //特别显示模式
						-webkit-line-clamp: 1; //行数
						line-clamp: 1;
						-webkit-box-orient: vertical; //盒子中内容竖直排列
					}
				}
			}
		}
		.content-part:not(.search-part):first-child {
			.title {
				display: none;
			}
		}
		.loading-container {
			.loading-img {
				animation: loading 0.8s linear infinite;
			}
		}
		@keyframes loading {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	}
}
</style>
